<template>
	<div>
		<el-form ref="refForm" :model="state.formDetail" style="background-color: #fff" class="pb20" label-width="130px" label-position="right">
			<el-form-item label="商品属性">
				<div class="df-fd" style="width: 100%">
					<div>
						<span style="margin-right: 5px; font-size: 12px; color: #a9afb9"
							>请根据实际情况填写产品的重要属性，填写属性越完整，越有可能影响搜索流量，越有机会被消费者购买<a
								href="https://market.m.taobao.com/app/qn/toutiao-new/index-pc.html?spm=a213gs.26037848.0.0.7d124831VSoWCY#/detail/10671889?_k=3u6obw"
								target="blank"
								>了解更多</a
							></span
						>
					</div>

					<div class="prop_box" v-if="state.formDetail.catProp">
						<el-row :gutter="20" :loading="state.catPropLoading">
							<template v-for="(item, index) in state.formDetail.catProp" :key="item.id">
								<el-col :span="8" class="mb20">
									<!-- 输入框 -->
									<el-form-item
										v-if="item.type === 'INPUT'"
										:label="item.name"
										:prop="'catProp.' + index + '.value.value'"
										:rules="{
											required: item.requiredRule == 'true' ? true : false,
											trigger: 'blur',
											validator: (rule, value, callback) => validateInput(rule, value, item, callback)
										}"
									>
										<el-input style="width: 280px !important" v-model.trim="state.formDetail.catProp[index].value.value" clearable></el-input>
									</el-form-item>
									<!-- 下拉单选 -->
									<el-form-item
										v-if="item.type === 'SINGLECHECK'"
										:label="item.name"
										:prop="'catProp.' + index + '.value.value'"
										:rules="{
											required: Boolean(item?.requiredRule) === true ? true : false,
											trigger: 'change',
											validator: (rule, value, callback) => validateSelect(rule, value, item, callback)
										}"
									>
										<el-select clearable filterable style="width: 280px !important" v-model="state.formDetail.catProp[index].value.value">
											<el-option v-for="item2 in item.options" :value="item2.value" :key="item2.value" :label="item2.displayName"></el-option>
										</el-select>
									</el-form-item>
									<!-- 下拉多选 -->
									<el-form-item
										v-if="item.type === 'MULTICHECK'"
										:label="item.name"
										:rules="{
											validator: (rule, value, callback) => validateMultiCheck(rule, value, item, callback)
										}"
										:prop="'properties.' + index + '.value'"
									>
										<el-select
											clearable
											filterable
											style="width: 280px !important"
											multiple
											v-model="state.formDetail.catProp[index].value"
											@change="multiCheck($event, item)"
										>
											<el-option v-for="item2 in item.options" :value="item2.value" :key="item2.value" :label="item2.displayName"></el-option>
										</el-select>
									</el-form-item>
									<!-- 组合式下拉+输入框 -->
									<el-form-item
										v-if="item.type == 'MULTICOMPLEX'"
										:label="item.name"
										:prop="'catProp.' + index + '.complexValues'"
										:rules="{
											required: item.required,
											validator: (rule, value, callback) => validateComplex(rule, value, item, callback),
											trigger: ['change', 'blur']
										}"
									>
										<div class="complex-box">
											<el-row v-for="(i, idx) in state.formDetail.catProp[index]?.complexValues" :key="idx">
												<el-form-item :prop="'catProp.' + index + '.complexValues' + idx">
													<el-col :span="8">
														<el-select filterable class="select" v-model="i.fieldMap.material_prop_name.value.value" @change="selChange($event, i)">
															<el-option
																v-for="(item, index) in i.fieldMap.material_prop_name.options"
																class="options"
																:key="index"
																:label="item.displayName"
																:value="item.value"
															></el-option> </el-select
													></el-col>
													<el-col :span="8">
														<el-input class="input" clearable v-model.trim="i.fieldMap.material_prop_content.value.value">
															<template #append>
																<span>%</span>
															</template>
														</el-input></el-col
													>
													<el-col :span="2">
														<el-icon @click="removeItem(item, idx)">
															<Delete />
														</el-icon>
													</el-col>
												</el-form-item>
											</el-row>
											<div>
												<el-button @click="addComplex(item, index)" plain type="dashed">添加材质成分</el-button>
											</div>
										</div>
									</el-form-item>
								</el-col>
							</template>
						</el-row>
					</div>
				</div>
			</el-form-item>
		</el-form>

		<!-- <myInput v-model="iptVal" maxlength="10" class="myipt" /> -->

		<div class="chart_box">
			<myChart :options="chartOptions" />

		</div>
	</div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import { catProps } from '@/data/fieldList'
import myInput from '@/components/myInput/index.vue'
import myChart from "@/components/myChart/index.vue";
const state = reactive({
	formDetail: {}
})
const compositionstart = () => {
	// console.log("compositionstart");
}
const iptVal = ref()
// 下拉单选校验
const validateSelect = (rule, value, item, callback) => {
	if (rule.required && !value) {
		callback(new Error('不能为空'))
	} else {
		callback()
	}
}

// 输入框校验
const validateInput = (rule, value, item, callback) => {
	if (rule.required && !value) {
		callback(new Error('不能为空'))
	} else if (value) {
		if (item.maxLengthRule) {
			const len = getByteLen(value)
			if (len > Number(item.maxLengthRule)) {
				callback(new Error('字符长度不能超过' + item.maxLengthRule))
			} else {
				callback()
			}
		} else {
			callback()
		}
	} else {
		callback()
	}
}

// 复合型校验
const validateComplex = (rule, value, item, callback) => {
	if (rule.required && !value) {
		callback(new Error('不能为空'))
	} else if (value) {
		callback()
	} else {
		callback()
	}
}

// 下拉多选校验
const validateMultiCheck = (rule, value, item, callback) => {
	if (rule.required && !value) {
		callback(new Error('不能为空'))
	} else if (value) {
		if (item.maxValueRule) {
			const len = value.length
			if (len > Number(item.maxValueRule)) {
				callback(new Error('最多只能选择' + item.maxValueRule + '项'))
			} else {
				callback()
			}
		} else {
			callback()
		}
	} else {
		callback()
	}
}

// 添加复合型框
const addComplex = (item, index) => {
	const addObj = {
		fieldMap: {
			material_prop_name: {
				id: 'material_prop_name',
				name: '材质',
				type: 'SINGLECHECK',
				options: item.fieldMap?.material_prop_name?.options,
				value: {
					value: null,
					attributes: {
						inputValue: null
					}
				}
			},
			material_prop_content: {
				id: 'material_prop_content',
				name: '含量(%)',
				type: 'SINGLECHECK',
				value: {
					value: null,
					attributes: {}
				}
			}
		}
	}
	state.formDetail.catProp[index].complexValues.push(addObj)
}

//多选
const multiCheck = (e, item) => {
  let arr = [];
  arr = e.map((i) => {
    const inputValue = item.options.find((op) => op.value == i)?.displayName;
    return {
      value: i,
      attributes: {
        inputValue: inputValue,
      },
    };
  });
  item.values = arr;
};

// 删除组合框
const removeItem = (i, idx) => {
	if (i.complexValues.length) {
		i.complexValues.splice(idx, 1)
	}
}

const selChange = (e, i) => {
	console.log('e', e)
	console.log('i', i)
}

const chartOptions = ref({
	xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
})

onMounted(() => {
	state.formDetail.catProp = catProps
})
</script>

<style scoped lang="scss">
.df-fd {
	display: flex;
	flex-direction: column;
}
.myipt {
	width: 200px;
}
.chart_box{
	width: 100%;
	height: 500px;
	border: 1px solid blue;
}
</style>
